<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>个人博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" href="../plugin/admin/tree.ico" type="image/ico">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="../plugin/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../plugin/admin/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../plugin/dist/css/swiper.min.css">
<script src="../plugin/dist/js/swiper.min.js"></script>
<script src="../js/show.js"></script>
<script src="../js/sort.js"></script>
<script src="../js/jquery.cookie.js"></script>
<link rel="stylesheet" href="../css/public.css" />
<link rel="stylesheet" href="../css/index.css" />
</head>
<script type="text/javascript" th:inline="javascript">
	var pageNum = 1;
	$(function() {
		//alert($.cookie('username'))
		if ($.cookie('username') != undefined && $.cookie('username') != null
				&& $.cookie('username') != "") {
			$("#IFlogin").text("");
			//alert($.cookie('username'))
			$("#IFlogin").text(" 已登录");
		}

		$.post("../nav/sysNav", {
			"method" : "post"
		}, function(obj) {
			//alert(this.title);
			//遍历json列表,获取每一个分类,包装成li标签,插入到ul内部
			//$.each($(obj),function(){});
			$(obj).each(
					function() {
						//alert(this.cname);
						$("#loadNav").append(
								"<li><a href='../home/index' class='"+this.icon+"'>&nbsp;"
										+ this.title + "</a></li>");
					});
		}, "json");

		$
				.post(
						"../poster/displayPoster",
						{
							"method" : "post"
						},
						function(obj) {
							//alert(this.title);
							//遍历json列表,获取每一个分类,包装成li标签,插入到ul内部
							//$.each($(obj),function(){});
							$(obj)
									.each(
											function() {
												//alert(this.cname);
												$("#poster")
														.append(
																"<div class='swiper-slide'><a href='#'><img src='"+this.path+"' alt=''></a></div>");
												/* window.location.reload(); */
											});
						}, "json");
		/* 	$.post(
							"../blog/selectBlog",
							{
								"method" : "post"
							},
							function(obj) {
								//alert(this.title);
								//遍历json列表,获取每一个分类,包装成li标签,插入到ul内部
								//$.each($(obj),function(){});
								$(obj)
										.each(
												function() {
													//alert(this.cname);
													$("#Blogslist")
															.append(
																	"<div class='col-xs-6 col-md-3 visit'><a href='../blog/Details?id="
																			+ this.id
																			+ "' class='thumbnail'> <img src='"+this.path+"'/><h4>"
																			+ this.title
																			+ "</h4> <br><p>讲师："
																			+ this.author
																			+ "<b>免费</b></p></a></div>");
												});
							}, "json"); */
		$
				.post(
						"../booth/sysBooth",
						{
							"method" : "post"
						},
						function(obj) {
							//alert(this.title);
							//遍历json列表,获取每一个分类,包装成li标签,插入到ul内部
							//$.each($(obj),function(){});
							$(obj)
									.each(
											function() {
												//alert(this.cname);
												$("#sysBooth")
														.append(
																"<div class='row'><div class='col-md-12' id='topandbomt'><img src='"+this.path+"'></div></div>");
											});
						}, "json");

		getData(1);
		$("#page li")
				.click(
						function() {
							//alert($(this).attr("pageNum"))
							//去除原来节点的激活状态,因为第一个点是前一页
							$("#page li").eq(pageNum).removeClass("active");
							//前一页
							if ($(this).attr("pageNum") == "pre") {
								//1.没有前一页
								if (pageNum == 1) {
									alert("不要点击了，已经是第一页了")
									//设置第一页为活动页
									$("#page li").eq(pageNum)
											.addClass("active");
								}
								//有前一页
								else {
									pageNum = pageNum - 1;
									$("#page li").eq(pageNum)
											.addClass("active");
									getData(pageNum);
								}
							} else if ($(this).attr("pageNum") == "next") {
								//alert("当前pageNum:" + pageNum)
								//1.没有下一页了
								if ($("#page li").eq(pageNum).next().attr(
										"pageNum") == "next") {
									alert("不要点击了，已经是最后一页了")
									//设置第一页为活动页
									$("#page li").eq(pageNum)
											.addClass("active");
								}
								//有下一页
								else {
									//alert("hahah ")
									pageNum++;
									$("#page li").eq(pageNum)
											.addClass("active");
									getData(pageNum);
								}
							}
							//既不是前一页，也不是后一页
							else {
								//去除原来节点的激活状态,因为第一个点是前一页
								$("#page li").eq(pageNum).removeClass("active");
								//设置当前活动节点
								pageNum = $(this).attr("pageNum");
								//激活当前节点
								$(this).addClass("active")
								//后台获取数据
								getData(pageNum);
							}
						})

	});
	function getData(pageNum) {
		$
				.ajax({
					url : '../blog/getlist',
					dataType : "json",
					type : 'POST',
					cache : false,
					//async: true,//请求是否异步，默认为异步，这也是ajax重要特性
					data : {
						pageNum : pageNum,
						pageSize : 8
					}, //参数值
					success : function(data) {
						console.log("data:" + data)
						$("#jptjMain").empty();
						var jptjBody = "";
						$
								.each(
										data.rows,
										function(n, blog) {
											var tmp = "<div class='col-xs-6 col-md-3 visit'><a href='../blog/Details?id="
													+ blog.id
													+ "' class='thumbnail'> <img src='"+blog.path+"'/><h4>"
													+ blog.title
													+ "</h4> <br><p>讲师："
													+ blog.author
													+ "<b>免费</b></p></a></div>"
											jptjBody = jptjBody + tmp;
										})
						$("#jptjMain").append(jptjBody)
					},
					complete : function() {
						console.log("获取" + pageNum + "页数据")
					},
					error : function() {
						alert("服务器暂时不可用")
					}
				});

	};
	function judgeIFLogin() {
		if ($.cookie('username') !== undefined && $.cookie('username') != null
				&& $.cookie('username') != "") {
			$("#IFlogin").text("");
			alert($.cookie('username'))
			$("#IFlogin").text("已登录");
		}
	}
</script>
<body>
	<div class="container  heading">
		<div class="row">
			<div class="col-md-6">
				<ul>
					<li><a href=""><img src="../img/logo.jpg" alt=""></a></li>
					<li><a href="../home/index">首页</a></li>
					<li><a href="./login">登录</a></li>
					<li><a href="./reg">注册</a></li>
				</ul>
			</div>
			<div class="col-md-4">
				<ul>
					<li><input type="text"></li>
					<li><a href="#"><span class="glyphicon glyphicon-search"
							id="face"></span></a></li>
				</ul>
			</div>
			<div class="col-md-2 user">
				<ul>
					<li><a href="#"><span title="18772050081"
							class="glyphicon glyphicon-phone-alt" id="call"></span></a></li>
					<!-- <li><a href=""><span class="glyphicon glyphicon-user"><b
								class="top">1</b></span></a></li> -->
					<li><a href="#"><span id="IFlogin"
							class="glyphicon glyphicon-user">&emsp;未登录</span></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container-fluid showcenter">
		<div class="row">
			<div class="col-md-2 text-center"
				style="width: 210px; margin-left: 60px;">
				<div class="span8">
					<ul class="nav nav-tabs nav-stacked" id="loadNav">
						<li role="presentation" class="active"><a href="#"
							class="glyphicon glyphicon-home">&nbsp;首页</a></li>
						<!-- <li><a href="#" class="glyphicon glyphicon-wrench">&nbsp;网站前端</a></li>
						<li><a href="#" class="glyphicon glyphicon-eye-close">&nbsp;后端技术</a></li>
						<li><a href="#" class="glyphicon glyphicon-time">&nbsp;发布信息</a></li>
						<li><a href="#" class="glyphicon glyphicon-tree-conifer">&nbsp;友情链接</a></li> -->
					</ul>
				</div>
			</div>
			<div class="swiper-container show col-md-4">
				<div class="swiper-wrapper" id="poster">
					<!-- <div class="swiper-slide">
					<a href=""><img src="../img/show/1.jpg" alt=""></a>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../img/show/2.jpg" alt=""></a>
				</div>
				<div class="swiper-slide">
					<a href=""><img src="../img/show/3.jpg" alt=""></a>
				</div> -->
				</div>
				<!-- 分页器 -->
				<div class="swiper-pagination"></div>
				<!-- 导航按钮 -->
				<div class="swiper-button-white swiper-button-prev"></div>
				<div class="swiper-button-white swiper-button-next"></div>
			</div>
			<div class="col-md-2 container" id="sysBooth">
				<!-- <div class="row">
					<div class="col-md-12" id="topandbomt">
						<img src="../img/show/top.png" alt="">
					</div>
				</div>
				<div class="row">
					<div class="col-md-12" id="topandbomt">
						<img src="../img/show/bomt.png" alt="">
					</div>
				</div> -->
			</div>
		</div>
		<div class="container  sort">
			<div class="row">
				<div class="col-md-12">
					<ul style="margin-left: 140px;">
						<li><a href="" id="index1"><span
								class="glyphicon glyphicon-blackboard"></span>&nbsp;计算机基础</a><b
							class="itme1"></b>
							<div class="sortitme">
								<ul>
									<h4>操作系统</h4>
									<li><a href="">Windows系统</a></li>
									<li><a href="">苹果系统</a></li>
									<li><a href="">centos系统</a></li>
									<li><a href="">安卓系统</a></li>
									<li><a href="">鸿蒙系统</a></li>
								</ul>
								<ul>
									<h4>计算机原理</h4>
									<li><a href="">硬件</a></li>
									<li><a href="">软件</a></li>
									<li><a href="">输入</a></li>
									<li><a href="">输出</a></li>
									<li><a href="">cpu</a></li>
								</ul>
							</div></li>
						<li><a href=""><span class="glyphicon glyphicon-calendar"></span>&nbsp;前端</a><b
							class="itme2"></b></li>
						<li><a href=""><span
								class="glyphicon glyphicon-piggy-bank"></span>&nbsp;后台</a><b
							class="itme3"></b></li>
						<li><a href=""><span
								class="glyphicon glyphicon-education"></span>&nbsp;实战</a><b
							class="itme4"></b></li>
					</ul>
				</div>

			</div>
		</div>
		<!-- <div class="container">
			<div class="row" id="Blogslist"></div>
		</div> -->
		<div class="container">
			<div class="row" id="jptjMain">
				<!-- 主体 -->
			</div>
			<div class="row">
				<div class="col-md-12 text-center">
					<nav>
						<ul class="pagination pagination-lg" id="page">
							<li class="disabled" pageNum="pre"><a href="#!"> <span><i
										class="mdi mdi-chevron-left"></i></span>
							</a></li>
							<th:block th:each="num:${navigatepageNums}">
								<th:block th:if="${num} eq 1">
									<li th:pageNum="${num}" th:class="active"><a href="#"
										th:text="${num}"></a></li>
								</th:block>
								<th:block th:if="${num} ne 1">
									<li th:pageNum="${num}"><a href="#" th:text="${num}"></a></li>
								</th:block>
							</th:block>
							<li pageNum="next"><a href="#!"> <span><i
										class="mdi mdi-chevron-right"></i></span>
							</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
		<hr>
		<!-- 底部 -->
		<div class="container">
			<div class="row">
				<div class="col-md-2 footer">
					<ul>
						<li><h4>关于我们</h4></li>
						<li><a href="">关于我们</a></li>
						<li><a href="">关于我们</a></li>
						<li><a href="">关于我们</a></li>
					</ul>
				</div>
				<div class="col-md-2 footer">
					<ul>
						<li><h4>使用帮助</h4></li>
						<li><a href="">使用帮助</a></li>
						<li><a href="">使用帮助</a></li>
						<li><a href="">使用帮助</a></li>
					</ul>
				</div>
				<div class="col-md-2 footer">
					<ul>
						<li><h4>开发案例</h4></li>
						<li><a href="">开发案例</a></li>
						<li><a href="">开发案例</a></li>
						<li><a href="">开发案例</a></li>
					</ul>
				</div>
				<div class="col-md-2 footer">
					<ul>
						<li><h4>联系方式</h4></li>
						<li><a href="">联系方式</a></li>
						<li><a href="">联系方式</a></li>
						<li><a href="">联系方式</a></li>
					</ul>
				</div>
				<div class="col-md-2" id="pay">
					<ul>
						<li>&nbsp;</li>
						<li><img src="../img/qq.jpg" alt=""></li>
					</ul>
				</div>
				<div class="col-md-2" id="pay">
					<ul>
						<li>&nbsp;</li>
						<li><img src="../img/wx.jpg" alt=""></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<!--关于我们-->
				<div class="col-md-12 link">
					<a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">人才招聘</a>
					| <a href="#">商家入驻</a> | <a href="#">广告服务</a> | <a href="#">友情链接</a>
					| <a href="#">销售联盟</a> | <a href="#">小伟社区</a> | <a href="#">码蚁公益</a>
				</div>
				<!--版权-->
				<div class="col-md-12 copyright">
					@&nbsp;&copy;&nbsp;2019-2020&nbsp;&nbsp;小伟My.com&nbsp;版权所有</div>
			</div>
		</div>
		<!-- 音效标签 -->
		<audio id="video" controls="controls">
			<source src="../img/music/wx.mp4" type="video/mp4">
		</audio>
		<audio id="video1" controls="controls">
			<source src="../img/music/2.mp3" type="video/mp4">
		</audio>
		<audio id="video2" controls="controls">
			<source src="../img/music/2.mp4" type="video/mp4">
		</audio>
		<script type="text/javascript">
			function play() {
				var video = document.getElementById('video');
				video.play();
			}
			function play1() {
				var video1 = document.getElementById('video1');
				video1.play();
			}
		</script>
</body>
</html>
